<template>
  <div class="event-container">
    <list-scroll-view
      v-model="loading"
      refresher-enabled
      @refresh="onRefresh"
      @load="onListLoad"
    >
      <column
        :format="item.format"
        :title="item.title"
        :description="item.description"
        :label="item.extras"
        :medias="item.medias"
        v-for="(item,index) in list"
        :key="index"
        @click="pushNativelink(item.mplink)"
      />
    </list-scroll-view>
  </div>
</template>

<script>
import ListScrollView from '@/components/listScrollView/index'
import Column from '@/components/column/index'
import { getArticleList } from '@/api'

export default {
  components: {
    Column,
    ListScrollView
  },
  data () {
    return {
      title: '',
      loading: false,
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      },
      channelId: 0
    }
  },
  onLoad (option) {
    if (option.id) {
      this.channelId = parseInt(option.id)
    } else {
      this.channelId = 0
    }
    if (option.title) {
      this.title = decodeURI(option.title)
    }
  },
  created () {
    console.log('Page needs/index created')
  },
  beforeMount () {
    this.getList()
  },
  onShow () {
    this.titleChange(this.title)
  },
  methods: {
    titleChange (t) {
      wx.setNavigationBarTitle({
        title: t
      })
    },
    // 获取数据方法
    getList () {
      console.log('needs/index getList')
      const that = this
      that.loading = false
      let startTime = new Date()
      const params = {
        page: that.page,
        channel_id: that.channelId
      }
      console.log('GetLIST PARAMS:', params)
      getArticleList(params).then(res => {
        const data = res
        console.log('data', data)
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...data.items)
          } else {
            that.list = data.items
          }
        } else {
          that.list = []
        }
        that.meta = data.meta

        let endtime = new Date()
        let duration = endtime - startTime
        if (duration < 1500) {
          console.log('duration', duration)
          setTimeout(() => {
            that.loading = true
          }, 1500 - duration)
        } else {
          that.loading = true
        }
      }).catch(e => {
        console.error(e)
      })
    },

    onRefresh () {
      // 初始化页码
      this.page = 1
      this.getList()
    },
    // 上拉加载
    onListLoad () {
      // 执行上拉执行的功能
      if (this.meta.pageCount <= this.meta.currentPage) {
        console.log('数据加载完了')
      } else {
        // 下一页
        this.page = this.page + 1
        this.getList()
      }
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  position: relative;
  height: 100%;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.van-overlay {
  background: transparent;
}
</style>
